    /*
        需求：
            1.把所有图片挪到右侧候场区。除了第一张
            2.图片可以自动轮播。
            3.焦点跟随。
            4.左右按钮点击可以切换图片。
            5.点击焦点可以跳转到对应那张图。


        插件使用方法：
            * 复制html，改图片来源，焦点个数要和图片个数匹配
            * 修改css：
                * 修改大小的信息
                * 修改按钮和焦点的样式
                * 位置
            * 修改js：
                * 图片切换时间：找定时器
                * 时候一开始显示左右按钮   
    */

    var box = document.getElementById('box');
    var lis = box.getElementsByTagName('li');//集合
    var spans = box.getElementsByTagName('span');//集合
    var prevBtn = box.getElementsByClassName('prev')[0];
    var nextBtn = box.getElementsByClassName('next')[0];
    var point = box.getElementsByClassName('point')[0];
    var now = 0;//当前在可视区图片的下标
    var timer = null;

    //1.把所有图片挪到右侧候场区。除了第一张
    var iw = lis[0].offsetWidth;
    for(var i = 0; i < lis.length; i++) {
        lis[i].style.left = iw + 'px';
    }
    lis[0].style.left = 0;

    //3.焦点跟随。
    function spanMove() {
        //清除所有高亮
        for(var i = 0; i < spans.length; i++) {
            spans[i].className = '';
        }
        spans[now].className = 'active';
    }

    //2.图片可以自动轮播。

    //下一页
    function next() {
        //旧图离场：往左边走
        startMove(lis[now], {'left' : -iw});
        //新图候场
        // now++;
        now = ++now > lis.length - 1 ? 0 : now;//临界点
        lis[now].style.left = iw + 'px';
        //新图进场
        startMove(lis[now], {'left' : 0});
        spanMove();//焦点跟随
    }

    //上一页
    function prev() {
        //旧图离场：往右边走
        startMove(lis[now], {'left' : iw});
        //新图候场
        // now++;
        now = --now < 0 ? lis.length - 1 : now;//临界点
        lis[now].style.left = -iw + 'px';
        //新图进场
        startMove(lis[now], {'left' : 0});
        spanMove();//焦点跟随
    }

    timer = setInterval(next, 2000);//每隔两秒切换一个图片

    

    //4.左右按钮点击可以切换图片。

    //鼠标移入可视区就停止轮播
    box.onmouseenter= function() {
        clearInterval(timer);
        prevBtn.style.display = nextBtn.style.display = 'block';
        console.log(111);
    }

    box.onmouseleave = function() {
        timer = setInterval(next, 2000);
        prevBtn.style.display = nextBtn.style.display = 'none';
        console.log(222);
    }

    //上一页
    prevBtn.onclick = function() {
        prev();
    }

    //下一页
    nextBtn.onclick = function() {
        next();
    }


    //5.点击焦点可以跳转到对应那张图。
    //index > now;从右边切入新图
 
    //事件委托  
    point.onclick = function(ev) {
        if(ev.target.tagName == 'SPAN') {
            console.log(ev.target.innerHTML);
            var index = ev.target.innerHTML - 1;//点击那个焦点的下标
            if(index > now) {
                //图片从右边切入
                //旧图挪到左边
                startMove(lis[now], {'left' : -iw});
                //新图候场
                lis[index].style.left = iw + 'px';
                //新图进场
                startMove(lis[index], {'left' : 0});
            }

            if(index < now) {
                //图片从左边切入
                 //旧图挪到左边
                 startMove(lis[now], {'left' : iw});
                 //新图候场
                 lis[index].style.left = -iw + 'px';
                 //新图进场
                 startMove(lis[index], {'left' : 0});
            }

            now = index;//新图变旧图
            spanMove();//焦点跟随
        }
    }









